<template>
    <view>
        <view class="home_cate">
            <navigator class="cate_item"
            v-for="item in category"
            :key="item.id"
            :url="`/pages/imageCate/index?id=${item.id}`">
                <image mode="aspectFill" :src="item.cover"/>
                <view class="cate_name">
                    <text>{{item.name}}</text>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            category:[]
        }
    },
    mounted() {
    //修改页面的标题
    uni.setNavigationBarTitle({title:"分类"})
    this.getList();
   },
   methods: {
       getList(){
           this.request({
               url:"http://157.122.54.189:9088/image/v1/vertical/category"
           })
           .then(result=>{
               // console.log(result);
               this.category = result.res.category;
           })
       }
   },
}
</script>

<style lang="scss" scoped>
    .home_cate{
        display:flex;
        flex-wrap:wrap;
        .cate_item{
            width:33.33%;
            border:4rpx solid #fff;
            position:relative;
            image{
                height:240rpx
            }
            .cate_name{
                position:absolute;
                width:100%;
                height:50rpx;
                left:0;
                bottom:0;
                color:#fff;
                // css3渐变
                background-image:linear-gradient(to right top,rgba(0,0,0,.3),rgba(0,0,0,0));
                font-size:40rpx;
                display:flex;
                align-items:center;
                text{
                    padding-left:12rpx;
                }
            }
        }

    }
</style>